<template>
  <div>
    <hips-input
      v-model="value"
      :label="dsxField.getProp('label')"
      :label-icon="dsxField.getProp('labelIcon')"
      :label-position="dsxField.getProp('labelPosition')"
      :type="dsxField.getProp('inputType') || 'text'"
      :placeholder="dsxField.getProp('placeholder')"
      :required="dsxField.getProp('required') || false"
      :disabled="dsxField.getProp('disabled') || false"
      :readonly="dsxField.getProp('readonly') || false"
      :show-clear-button="dsxField.getProp('showClearButton') || false"
      :show-search-button="dsxField.getProp('showSearchButton') || false"
      :show-error-message="false"
      :input-align="dsxField.getProp('inputAlign') || 'left'"
      :show-eye="dsxField.getProp('showEye') || false"      
      :debounce="dsxField.getProp('debounce')"
      @on-change="dsxField.emit('change', $event)"
      @on-focus="dsxField.emit('focus', $event)"
      @on-blur="dsxField.emit('blur', $event)"
      @on-enter="dsxField.emit('enter', $event)"
      @on-search="dsxField.emit('search', $event)"
      @on-click="dsxField.emit('click', $event)"
    >
    </hips-input>
    <div class="validate-result" v-if="validateResult">
      {{ validateResult }}
    </div>
  </div>
</template>

<script>
import { Input } from '@hips/vue-ui';

export default {
  components: {
    [Input.name]: Input,
  },
  props: {
    dsxField: {
      type: [Object, undefined],
      required: true,
    },
  },
  mounted() {
    console.log('this.dsxField = ', this.dsxField);
  },
  computed: {
    validateResult: {
      get: function() {
        const result = this.dsxField.getValidateResult();
        if (result) {
          return result.message;
        }
        return '';
      },
    },
    value: {
      get: function() {
        return this.dsxField.getValue();
      },
      set: function(val) {
        this.dsxField.setValue(val);
      },
    },
  },
};
</script>

<style scoped lang="stylus">
.validate-result {
  font-size: 12px;
  padding: 4px 10px;
  color: red;
  border-top: 1px solid #eee;
}
</style>
